<template>
  <div class="register-view">
    <el-card class="register-card">
      <template #header>
        <h2 class="register-title">用户注册</h2>
      </template>

      <el-form :model="registerForm" :rules="rules" ref="registerFormRef">
        <el-form-item prop="username">
          <el-input
            v-model="registerForm.username"
            placeholder="请输入用户名"
            :prefix-icon="User"
          />
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            v-model="registerForm.password"
            type="password"
            placeholder="请输入密码"
            :prefix-icon="Lock"
            show-password
          />
        </el-form-item>

        <el-form-item prop="confirmPassword">
          <el-input
            v-model="registerForm.confirmPassword"
            type="password"
            placeholder="请确认密码"
            :prefix-icon="Lock"
            show-password
          />
        </el-form-item>

        <el-form-item prop="sliderValue">
          <div class="slider-container">
            <span class="slider-label">请滑动验证</span>
            <el-slider
              v-model="registerForm.sliderValue"
              :min="0"
              :max="100"
              :show-tooltip="false"
              @change="handleSliderChange"
              style="width: 250px"
            />
          </div>
        </el-form-item>

        <el-form-item>
          <div class="button-group">
            <el-button
              type="primary"
              @click="handleRegister"
              class="register-button"
            >
              注册
            </el-button>
            <el-button @click="goToLogin" class="login-button">
              返回登录
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import axios from "axios";
const router = useRouter();

/**
 * @description 注册表单数据
 */
const registerForm = reactive({
  username: "",
  password: "",
  confirmPassword: "",
  sliderValue: 0,
});

/**
 * @description 表单验证规则
 */
const rules = {
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    {
      min: 3,
      max: 20,
      message: "用户名长度应在3-20个字符之间",
      trigger: "blur",
    },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 20, message: "密码长度应在6-20个字符之间", trigger: "blur" },
  ],
  confirmPassword: [
    { required: true, message: "请确认密码", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value !== registerForm.password) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
  sliderValue: [
    { required: true, message: "请完成滑块验证", trigger: "change" },
    { validator: validateSlider, trigger: "change" },
  ],
};

const registerFormRef = ref(null);

/**
 * @description 滑块验证函数
 * @param {Object} rule - 验证规则对象
 * @param {Number} value - 滑块值
 * @param {Function} callback - 回调函数
 */
function validateSlider(rule, value, callback) {
  console.log(value, "value");
  if (value === 100) {
    callback();
  } else {
    callback(new Error("请将滑块滑到最右侧"));
  }
}

/**
 * @description 处理滑块变化
 * @param {Number} value - 滑块值
 */
const handleSliderChange = (value) => {
  if (value === 100) {
    ElMessage.success("验证成功");
  }
};

/**
 * @description 处理注册逻辑
 */
const handleRegister = async () => {
  if (!registerFormRef.value) return;
  await registerFormRef.value.validate(async (valid) => {
    if (valid) {
      //表示验证成功 发送请求注册了
      const { data } = await axios({
        method: "post",
        url: "http://localhost:3001/api/admin/register",
        data: registerForm,
      });
      if (data.status === 1) {
        ElMessage.success("注册成功");
        router.push("/login");
      } else {
        ElMessage.error(data.msg);
      }
      // router.push("/login");
    }
  });
};

/**
 * @description 返回登录页面
 */
const goToLogin = () => {
  router.push("/login");
};
//如果登陆过了 去到/首页 否则留在页面
onMounted(async () => {
  const { data } = await axios.get("/api/admin/whoami");
  if (data.status === 1) {
    router.push("/");
    ElMessage.success("该用户已经登陆过");
  }
});
</script>

<style lang="scss" scoped>
.register-view {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5f5;

  .register-card {
    width: 400px;

    .register-title {
      text-align: center;
      margin: 0;
      color: #303133;
    }

    .button-group {
      display: flex;
      gap: 20px;
      margin-top: 10px;
      width: 100%;

      .register-button,
      .login-button {
        flex: 1;
        height: 40px;
        font-size: 15px;
        border-radius: 4px;
        transition: all 0.3s ease;
      }

      .register-button {
        background: linear-gradient(to right, #409eff, #3a8ee6);
        border: none;
      }

      .login-button {
        background-color: #fff;
        border: 1px solid #dcdfe6;
        color: #606266;
      }
    }

    .slider-container {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 10px;

      .slider-label {
        min-width: 80px;
        color: #606266;
        font-size: 14px;
      }

      :deep(.el-slider) {
        flex: 1;
        margin: 0;

        .el-slider__runway {
          margin: 8px 0;
        }
      }
    }
  }
}
</style>
